<template>
  <sky-base-page :api-obj="qly.api.user.getuser" ref="skyBasePageRef" type="data" btnPadding="0"
                 refresher-enabled bg-page-color="#f5f5f5" refresher-bg="#fff"
                 :auto-load="false" @success="getUserInfo">
    <template #default="{dataInfo}">
      <view class="user-card" v-if="login">
        <view class="user-info">
          <view class="left-box">
            <up-avatar :src="dataInfo.headimg" shape="square" size="60" @tap="toUserInfo"></up-avatar>
            <view class="info">
              <view class="name">昵称：{{ dataInfo.nickname }}</view>

              <view>
                <view class="work-text" @tap="changeWork">
                  状态：
                  <text class="work online-text" v-if="dataInfo.go_to_work === WorkStatusEnum.onLine.value">
                    上线
                  </text>
                  <text class="work offline-text" v-if="dataInfo.go_to_work === WorkStatusEnum.offLine.value">
                    下线
                  </text>
                  <image v-if="dataInfo.go_to_work === WorkStatusEnum.offLine.value"
                         class="change-image" src="/static/images/change.png"/>
                </view>
              </view>
              <view class="phone">账户：
                <text class="account">{{ dataInfo.account }}</text>
                <image class="copy-image" src="/static/images/copy.png" @tap="setClipboardData"/>
              </view>
            </view>
          </view>
          <view>
            <up-icon name="edit-pen-fill" color="#2979ff" size="28" @tap="toUserInfo"></up-icon>
          </view>
        </view>
      </view>
      <view class="user-card" v-else @tap="toLogin">
        <view class="user-info">
          <view class="left-box">
            <up-avatar :src="dataInfo?.avatar" size="60"></up-avatar>
            <view class="info">
              <view class="name">点击登录</view>
            </view>
          </view>
        </view>
      </view>

      <up-card :show-head="false">
        <template #body>
          <view v-if="dataInfo.ievel===UserTypeEnum.agent.value" class="ievel">区域代理</view>
          <view class="balance-card" @tap="toRecode">
            <view class="value">{{ dataInfo.zs || 0 }}</view>
            <view class="label">当前钻石</view>
          </view>
        </template>
      </up-card>
      <!--      菜单卡片-->
      <menuCard :dataInfo="dataInfo" @openInvitation="openInvitation" @success="success"/>
    </template>

  </sky-base-page>

  <!--  修改手机号-->
  <update-phone ref="updatePhoneRef"/>

  <invitation-popup ref="invitationPopupRef" :account="userInfo.account"/>

<!--  <ad-rewarded-video adpid="1746969199" :loadnext="true" v-slot:default="{loading, error}" @load="onadload"-->
<!--                     @close="onadclose" @error="onaderror">-->
<!--    <button :disabled="loading" :loading="loading">显示广告</button>-->
<!--    <view v-if="error">{{ error }}</view>-->
<!--  </ad-rewarded-video>-->

<!--  <ad adpid="1746969199" @load="adLoad" @error="adError"></ad>-->
</template>
<script setup>
import menuCard from './components/menuCard.vue'
import {UserTypeEnum, WorkStatusEnum} from "@/enums/user";

const skyBasePageRef = ref()
const invitationPopupRef = ref()
const updatePhoneRef = ref()
const login = qly.storage.storageRef('login')

const userInfo = ref({})
const getUserInfo = (e) => {
  userInfo.value = e
  if (!e.phone) {
    updatePhoneRef.value.open()
  }
}


const toUserInfo = () => {
  qly.page.open('/pages/my/userInfo/index')
}

const toLogin = () => {
  uni.reLaunch({
    url: '/pages/load/index'
  })
}
// 余额记录
const toRecode = () => {
  qly.page.open('/pages/my/record/index')
}

const openInvitation = () => {
  invitationPopupRef.value.open()
}

const success = () => {
  skyBasePageRef.value.refresh()
}

// 复制邀请码
const setClipboardData = () => {
  uni.setClipboardData({
    data: userInfo.value.account,
    success: function () {
      uni.showToast({
        title: '复制成功:' + userInfo.value.account,
        icon: "none"
      })
    }
  });
}

const changeWork = async () => {
  if (userInfo.value.go_to_work === WorkStatusEnum.onLine.value) {
    return
  }
  const res = await qly.dialog.messageBox({
    title: '提示',
    message: '确定要上线吗？',
  })
  if (res) {
    confirmWork()
  }
}

const confirmWork = async () => {
  const res = await qly.api.user.sbkc()
  if (res.code === 1) {
    success()
    qly.dialog.success('修改成功').catch()
  } else {
    qly.dialog.apiError(res).catch()
  }
}

const onadload = () => {
  console.log('广告数据加载成功');
}

const onadclose = (e) => {
  const detail = e.detail
  // 用户点击了【关闭广告】按钮
  if (detail && detail.isEnded) {
    // 正常播放结束
    console.log("onadclose " + detail.isEnded);
  } else {
    // 播放中途退出
    console.log("onadclose " + detail.isEnded);
  }
}

const onaderror = () => {
  // 广告加载失败
  console.log("onaderror: ", e.detail);
}


const adLoad = () => {
  console.log("adLoad");
}
const adError = (e) => {
  console.log("adError", e);
}
onShow(async () => {
  await nextTick()
  success()
})
</script>

<style scoped lang="scss">
.user-card {
  background: #fff;
  padding: 32rpx 48rpx;
  margin-top: 2rpx;

  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18rpx;

    .left-box {
      display: flex;
      align-items: center;
      gap: 18rpx;

      .info {
        .phone {
          display: flex;
          align-items: center;
          gap: 6rpx;

          .account {
            color: #007aff;
          }

          .copy-image {
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
    }
  }
}

.money-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
  background-color: #fff;
  padding: 0 32rpx 32rpx;

  .grid-item {
    text-align: center;

    .money {
      font-weight: bold;
      font-size: 32rpx;
      color: #303133;
      margin-bottom: 8rpx;
    }

    .title {
      font-size: 28rpx;
      color: #303133;
    }
  }
}

.more-box {
  display: flex;
  align-items: center;
  gap: 8rpx;

  .text {
    font-size: 28rpx;
    color: #909193;
  }
}

.balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  gap: 4rpx;

  .value {
    font-size: 36rpx;
    font-weight: bold;
    color: #2979ff;
  }
}

.work-text {
  display: flex;
  align-items: center;

  .online-text {
    color: #00c76a;
  }

  .offline-text {
    color: #ff0000;
  }

  .change-image {
    width: 42rpx;
    height: 42rpx;
    margin-left: 8rpx;
  }
}

:deep(.u-card__body) {
  //padding: 0 !important;
}

.ievel {
  color: #2979ff;
}
</style>
